<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>下载</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0px;
      position: relative;
      
    }

    .box{
      /* display: flex;
      flex-wrap: wrap;
      height: 100vh; */
      max-height: 100vh;
      overflow: hidden;
    }
    header {
      background-color: lightblue;
      width: 100%;
      /* position: sticky;
      top: 0;
      width: 100%; */
      /* height: 30px; */
      
    }

    /* .content {
     max-height: 100vh;
     overflow: scroll;     
    } */

    .content{
      max-height: 100vh;
      overflow: scroll;
    }
  </style>
</head>

<body>
  <div class="box">

  
  <header> 标题 铁窗泪  <br> 标题 铁窗泪  <br> 标题 铁窗泪  <br>  <br> 标题 铁窗泪  <br> </header>
  <div class="content">
  
      position: fixed; 固定定位，锚准的是屏幕视口（viewport）
      那么对于标题 header 来说我们得确定它的高度，才能在content 上使用padding 与固定高度的header隔开 <br>
    
      那么问题来了，使用固定布局的header 的前提是知道header 的高度，如果我们不能确定header 的高度，比如是动态填写的内容怎么办？
      方法1  js 动态获取高度 document.querySelector('header').clientHeight，然后手动给content 设置padding-top 即可；<br>
  
       不使用js, 
       <br> 1  position: sticky; 粘性定位， 机遇滚动位置进行定位，给定一个阈值，在这个阈值之类sticky 表现如relative, 超出这个阈值则表现成fixed
       注意一点position 一定要搭配 top. bottom ,left，right ,也就是你必须在一个方向指明阈值才能生效，否则就是默认的relative 效果
        
       <br> 2  sticky  非常好，就是兼容性不太好，使用flex 来解决这个问题。
           首先box 开启flex 布局，然后选择 flex-wrap: wrap;overflow: hidden; 这样整个盒子高度不能超过一屏高度
             header 宽度设置成100%，这样就形成了2行
           content 上用max-height 规定最大高度100vh, 由于我们content 高度未指定只给了一个最大高度，所以由内容高，但是受到box
           整体限制，所以最多无法划到一屏之外， content 自身设置overflow: scroll; 那么此时就是content 这个容器出现滑动条，而不是box 整体

           注意： 不用flex , 你就得限制box 的高度也行；

           <br> 3  最简单 box   max-height: 100vh; over-flow:hdden;  <br>
                  content: max-height: 100vh; over-flow:scroll;

            就可以解决问题
  
      <div id="c_664537170">
  
        <p>　　既然这些玩家们这么自觉，楚光觉得自己还是别太管着他们，让他们自由发挥比较好。</p>
        <p>　　将物资堆在了电梯旁，楚光回到避难所，呼出管理者系统，很快任务完成的弹窗浮现在眼前。</p>
        <p>　　【恭喜宿主，完成日常任务：囤积木材，奖励：奖励点+2】</p>
        <p>　　【恭喜宿主，完成日常任务：烧制水泥，奖励：奖励点+5】</p>
        <p>　　完成的日常任务加起来有7个奖励点，还不够一个中级盲盒。</p>
        <p>　　不过楚光并不在意。</p>
        <p>　　他的玩家们已经搞定了水泥，现在粮食的储备也超过了十公斤，很快他就能再招募几个玩家进来当免费劳动力。</p>
        <p>　　“系统，所有奖励点，全部兑换初级盲盒！”</p>
        <p>　　管理者津贴中的奖励点数瞬间清零。</p>
        <p>　　墙上的合金门开启，传送带开始卷动，将盲盒开出的奖励送了出来。</p>
        <p>　　五根棒棒糖，一块200g净含量的巧克力，以及一袋500g净含量的食盐。和之前的一样，全都没有保质期和商标。</p>
        <p>　　这狗曰的初代管理者，到底得多喜欢吃糖？</p>
        <p>　　看着那五根棒棒糖和巧克力，楚光一时间不知该如何吐槽。</p>
        <p>　　不过这白花花的食盐，倒是个好东西。</p>
        <p>　　楚光伸手捡起，一脸意外之喜。</p>
        <p>　　贝特街能买到的盐都是从巨石城运来的粗盐，品相蜡黄，贵不说，质量还差，苦味儿甚至能盖过咸味儿。</p>
        <p>　　这种白花花的精盐，通常价格不菲，一般幸存者根本消费不起。</p>
        <p>　　“要是能再多来点就好了！”</p>
        <p>　　这点量，做菜还凑合，做腊肉或者香肠就有点儿浪费了。</p>
        <p>　　当然，拿去交易或许是个不错的选择，这白花花的精盐至少能换成10倍乃至20、30倍重量的粗盐。</p>
        <p>　　只不过，这里面又存在其他的风险。</p>
        <p>　　河谷行省是内陆行省。</p>
        <p>　　盐这种东西，是仅次于军火的暴利，没有足够的实力，想做这生意有点儿不太理智。</p>
        <p>　　确认完奖励，楚光接着打开了玩家列表，确认了一下玩家们昨天的下线时间和今天上线时间。</p>
        <p>　　让他意外的是，老白居然升级了？</p>
        <p>　　“砍树还能升级的？”</p>
        <p>　　楚光惊了。</p>
        <p>　　之前这些玩家的基因序列的开发进度都是0，但老白的基因序列的开发进度已经提升到了1%。</p>
        <p>　　对应的等级，也就是LV1。</p>
        <p>　　不过楚光想了想，也就释然了。</p>
        <p>　　砍树这种体力活儿，本身也相当于一种锻炼，再加上老白的基因序列又是力量系，开发进度上升到也没什么值得奇怪的地方。</p>
        <p>　　获取经验，不一定非得战斗才行。</p>
        <p>　　虽然后者是相对而言的捷径……</p>
        <p>　　关掉系统界面。</p>
        <p>　　坐在居民大厅的电脑前，楚光登陆了废土OL官网的后台。</p>
        <p>　　之前设置了预约门槛，需要填写收货地址和电话并且注册账号才能预约，楚光原本都已经做好预约人数增长放缓甚至停滞的准备，却没想到今天打开一看，预约人数已经从35涨到了45。</p>
        <p>　　好家伙。</p>
        <p>　　牛马俱乐部有这么多活人吗？</p>
        <p>　　心中惊讶之余，楚光接着登上企鹅号，打开了那个叫牛马俱乐部的游戏群，翻了会儿聊天记录才看出来一些端倪。</p>
        <p>　　原来就在昨天，群里涌进来了一大批新人，群成员数已经从一百多飙涨到了两百出头。</p>
        <p>　　这些新人大多都是被群友邀请进来围观的，不少都是群串子，常年活跃在各大游戏群。</p>
        <p>　　现在端游圈子里，已经开始流传起一个关于“完全沉浸式虚拟现实网游”的都市传说。</p>
        <p>　　虽然大多数人听过之后都是嗤之以鼻，但总有那么一两个相信的，并且费尽心思地找到“牛马俱乐部”加了进来。</p>
        <p>　　大家也不确定是不是狗管理们联合起来整活，总之这官网做的倒是有模有样的。</p>
        <p>　　——历史聊天记录——</p>
        <p>　　戒烟：【群里咋突然多了这么多新人？（懵.jpg）】</p>
        <p>　　捡垃圾99级：【大佬们！请问那个游戏怎么预约啊？要花钱吗？】</p>
        <p>　　戒烟：【卧槽？都是奔着废土OL来的？（吃惊.jpg）】</p>
        <p>　　一夜起床十几次：【群名可以改成废土OL玩家群了。（滑稽）】</p>
        <p>　　爷傲奈我何：【封测阶段不用花钱，以后不知道，注册个账号填个表就能排队了。至于什么时候能排到，看脸……哎，服了，真有人信。】</p>
        <p>　　戒烟：【夜十兄弟！你们昨晚上线了？？？有测试新内容吗？？？（激动）】</p>
        <p>　　一夜起床十几次：【测试了，测了一晚上，我们把水泥给整出来了，哈哈。你问方长吧，我要上课了，回聊。】</p>
        <p>　　戒烟：【水泥？？？】</p>
        <p>　　捡垃圾99级：【不是捡垃圾吗？？？】</p>
        <p>　　群里七嘴八舌的议论了好久。</p>
        <p>　　楚光直接跳过了那一长串的废话，翻到了方长的发言。</p>
        <p>
          　　来日方长：【说实话，这游戏在真实性方面的表现出乎了我的意料！和大多数沙盒建造类游戏不同，在废土OL中原木不会自己变成木材，合成木炭也不是简单地将木头丢进炉子里就能一键合成，而是需要先修一座炭窑，烧制方法和现实里也基本一样。制作水泥也是，没有一键合成的工作台，而是需要从烧制草木灰开始。】
        </p>
        <p>　　戒烟：【卧槽？这么真实的？！】</p>
        <p>　　来日方长：【没错，就是这么真实！战斗系统暂时还没测试，但就沙盒玩法，目前我和老白他们还没发现这款游戏的上限！】</p>
        <p>　　来日方长：【理论上讲，就我们目前接触到的一切材料，都能够根据现实中的物理化学规则进行改造，而且这些对地图环境的改造还是永久保留的！不会被刷新掉！这也是最让我惊喜的！】</p>
        <p>　　这让他想起了满世界修路的“伪沙盒游戏”死亡搁浅。</p>
        <p>　　不过这款游戏不只是修路，它的可交互内容比像素风的《minecraft》更多，画面却丝毫不含糊，甚至比摄影级画质的赛车游戏《地平线4》更加的以假乱真。</p>
        <p>　　尤其是那沉浸式的体验。</p>
        <p>　　是他从未见过的。</p>
        <p>　　简单一句话，这游戏他吹爆！</p>
        <p>　　爷傲奈我何：【呵，笑了。真有这么牛批，老子能在废土上盖一座金陵城。】</p>
        <p>　　刀下留人：【我也不信！太离谱。】</p>
        <p>　　白驹过隙：【少吹牛，等你进游戏就知道了，这游戏是老子见过最肝的，所有材料全靠手打，而且不支持挂机。玩别的游戏你能开着电脑挂机刷一晚上的怪，但玩这个游戏，砍几颗木头就能累的你手都抬不动！】</p>
        <p>　　八级大狂风：【确实，这点我深有体会。】</p>
        <p>　　戒烟：【草草草，听你们说的好想玩啊！！！呜呜呜光哥，我知道你在窥屏，给你跪了，求求给个机会吧！！！】</p>
        <p>　　楚光继续往下翻了翻聊天记录。</p>
        <p>　　拿到封测资格的狗管理和群主，基本上都是吹《废土OL》的彩虹屁，什么“沙盒玩法yyds”、“年度霸权预定”之类的。</p>
        <p>　　还有就是些眼馋的玩家，在那儿时不时的插句嘴，“十万重金求购内测资格”、“十万太少，我出一个亿（滑稽）”什么的。</p>
        <p>　　再然后，群友们就聊起了荒野求生。</p>
        <p>　　可能是对【来日方长】描述的玩法产生了兴趣，不少不相信“完全沉浸式虚拟现实网游真的存在”的玩家，也七嘴八舌地参与了讨论，甚至出谋划策了起来。</p>
        <p>　　其中让楚光最感兴趣的，是一个ID叫【WC真有蚊子】的群老哥。</p>
        <p>　　看入群时间，这位老哥才加群不久，是个新人。</p>
        <p>　　别人都在七嘴八舌地讨论游戏，他却在一本正经地讲木头的十八种用途。</p>
        <p>　　什么烧炭啊、做家具啊，那都是最基本的。</p>
        <p>　　除此之外，他还提到了木材的“干馏”。</p>
        <p>　　具体原理就是，在密闭容器中烘烤木头制碳的过程中，会释放大量可燃气体和富含各类有机化学成分的烟气。</p>
        <p>　　这些复杂的混合物统称为“焦木物”，是许多化工产品的化学前体——直到煤焦油和石油被广泛运用之前。</p>
        <p>　　根据这位群老哥的描述，通过对收集到的冷凝物进行过滤，可以得到由乙酸、丙酮、甲醇构成的水样溶液，以及浓稠的焦油状残渣。</p>
        <p>　　两者均属于复杂的混合物，但都可以用分馏的方法来提取其中的不同有机化学成分。</p>
        <p>　　乙酸和甲醇就不用说了，丙酮这玩意儿可是个好东西，不但能作为有机溶剂，还能用来制作无烟火药！</p>
        <p>　　看到这儿的时候，楚光整个人都惊了。</p>
        <p>　　“这家伙是搞化工的？”</p>
        <p>　　他下意识地点了下那人的头像，又点了下空间。</p>
        <p>　　空间没上锁，倒是很轻松就进去了，不过里面却没有和化工有关的东西，而是些家具、建材的广告。</p>
        <p>　　好吧……</p>
        <p>　　看来是个卖家具的。</p>
        <p>　　对木头这么了解八成是兴趣使然。</p>
        <p>　　不过，他的知识说不定能在这里派上用场。</p>
        <p>　　楚光思虑片刻，心中顿时有了主意，给他扔了个私聊弹窗过去。</p>
        <p>　　“朋友，有兴趣加入封测吗？”</p>
        <p>　　废土这边是早上九点，平行世界的华国应该是晚上九点，正是嗨的时候，必不可能睡着了。</p>
        <p>　　果然，那个叫【WC真有蚊子】的老哥发来一个问号。</p>
        <p>　　【？】</p>
        <p>　　【您哪位？】</p>
        <p>　　楚光打字道。</p>
        <p>　　【我是废土OL的策划。】</p>
        <p>　　WC真有蚊子：【卧槽？！你就是策划？】</p>
        <p>　　WC真有蚊子：【兄嘚，怎么测？要钱吗？我没钱的。】</p>
        <p>　　楚光耐心地说明。</p>
        <p>　　【不用花钱，填个表就行，我把连接发你。】</p>
        <p>　　虽然满肚子疑惑，但WC真有蚊子还是点开链接，在官网预约页面填写了地址和电话。</p>
        <p>　　只不过在填地址的时候，他还是留了个心眼，写的是小区的驿站，没有写门牌号。</p>
        <p>　　WC真有蚊子：【然后呢？还有啥程序不？】</p>
        <p>　　光：【没了，预约编号发我一下，我这边在后台帮你标记上，三天后上线我会通知你。】</p>
        <p>　　制作克隆体需要三天时间。</p>
        <p>　　就在楚光寻思着，现在木匠有了，前哨站还缺点啥人才的时候，群消息忽然炸了。</p>
        <p>　　打开群聊一看，原来是那个【WC真有蚊子】前脚刚填完表，后脚就去群里装逼了。</p>
        <p>　　【哈哈哈哈，铁子们，爷拿到封测资格了！！！】</p>
        <p>　　戒烟：【卧槽？卧槽卧槽！】</p>
        <p>　　戒烟：【凭什么！明明我更先预约的！T.T】</p>
        <p>　　群消息瞬间炸了。</p>
        <p>　　一起炸的，还有楚光这边的私聊。</p>
        <p>　　看着那一长串小红点，楚光头皮发麻，知道自己潜水是潜不下去了，连忙出来解释。</p>
        <p>　　光：【大家稍安勿躁哈，封测也是为了大家的游戏体验，现阶段我们需要测试游戏各项系统是否完备，所以需要一些具备特殊领域知识的玩家来充当小白鼠。】</p>
        <p>　　戒烟：【我也能当小白鼠啊！我七年驾龄！T.T】</p>
        <p>　　刀下留人：【切，你七年驾龄算个鸟，老子还会开挖掘机呢！】</p>
        <p>　　爷傲奈我何：【你们都别吵了，你没发现这个WC真有蚊子，是昨天才加的群吗？没准儿是狗管理的小号！什么完全沉浸式虚拟现实游戏，垃圾！都是假的！】</p>
        <p>　　④谁捌懂僾：【看空间不像是小号啊……】</p>
        <p>　　戒烟：【光哥！给您跪了！给个机会吧！】</p>
        <p>　　光：【……再等几天吧，等几天会有一百个资格放出，相信我，大家都有机会的！】</p>
        <p>　　群成员们又是一阵高朝。</p>
        <p>　　楚光试着平息群友们的情绪，但发现一点儿用都没有，这会儿其他管理又都在游戏里，根本管不到这边。</p>
        <p>　　这样下去不行啊……</p>
        <p>　　要不，再放个资格？</p>
        <p>　　楚光摸着下巴寻思了起来。</p>
        <p>　　反正基地里的粮食也储备了有十来公斤了，有了枪马上也能打猎了，多两双筷子应该没问题……</p>
        <p>　　对了，粮食！</p>
        <p>　　楚光眼睛顿时一辆，在键盘上抠字。</p>
        <p>　　光：【对了，我们这还缺个厨师。】</p>
        <p>　　光：【测试烹饪系统。】</p>
        <p>　　让楚光没想到的是，他发完这条消息后，群里争吵的反而更激励了。</p>
        <p>　　木工不是所有人都会，但厨师的门槛可就太低了。</p>
        <p>　　这年头谁还不会打个两菜一汤？</p>
        <p>　　那不是有手就行！</p>
        <p>　　甭管真会还是假会，群里的老哥们一个比一个能吹，什么“老子闭着眼睛都能炒一盘宫保鸡丁”、“辣鸡，我家狗都会”全跑出来了，就差没把自己吹成厨神转世，食神下凡。</p>
        <p>　　为了封测资格，这帮网友们也是无所不用其极，倒是把楚光给整不会了。</p>
        <p>　　这特么该咋选啊！</p>
        <p>　　争论足足持续了有半个钟头，直到一位老哥晒出了自己的新东方证书才算平息。</p>
        <p>　　这东西，确实比吹牛逼更有说服力。</p>
        <p>　　楚光当即宣布了第六个封测资格的归属，私信问到预约编号之后，便光速下线了。
  
        </p>
   
  
    </div>
  </div>
  

</div>
  <script>


  </script>
</body>

</html>